<template>
  <div class="navbar">
    <div class="head" @click="headClickHanlde">
      <div class="img">
        <img src="../../assets/image/head.png" alt="" />
      </div>
      <!-- <img :src="userPhoto" alt="" /> -->
      <span class="name">{{userName}}</span>
    </div>
    <div class="content"></div>
    <div class="message" @click="messageClickHandle">
      <van-icon
        name="chat-o"
        size="2em"
        :badge="messageCount === 0 ? '' : messageCount"
      />
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'NavBar',
  props: ['messageCount'],
  emits: ['toMy', 'toMessage'],
  setup(props, context) {
    const store = useStore()

    const userName= computed(() => store.getters.getUserName)

    function headClickHanlde() {
      context.emit('toMy')
    }

    function messageClickHandle() {
      context.emit('toMessage')
    }

    return {
      userName,
      headClickHanlde,
      messageClickHandle,
    }
  },
}
</script>
<style lang="scss" scoped>
$img-wh: 3rem;
.navbar {
  width: 100%;
  height: var(--nav-top-bar-height);
  // position: fixed;
  // left: 0;
  // top: 0;
  background-color: var(--background_color);
  // background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-top: 0.8rem;
  // padding: 0 2vw;

  .head {
    min-width: 10rem;
    height: 100%;
    box-sizing: border-box;
    // padding: 2vw;
    overflow: hidden;
    // background-color: aquamarine;
    display: flex;
    padding-left: 3vw;
    align-items: center;
    
    &:active {
      color: var(--blue-color1);
    }

    .img {
      border-radius: 50%;
      width: $img-wh;
      height: $img-wh;
      // display: block;
      // border: 2px solid #FFFFFF;
      // box-shadow: 0.06rem 0.06rem 0.6rem #CCC,
      //               0.07rem 0.07rem 0.7rem #EEE;

      img {
        width: 90%;
        height: 90%;
      }
    }
    
    .name {
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      margin-left: 0.8rem;
      font-size: 1.5rem;
    }
    // background-color: orange;
  }

  .content {
    flex: 1;
    height: 100%;
  }

  .message {
    width: 10vw;
    height: 100%;
    display: flex;
    align-items: center;

    &:active {
      color: var(--blue-color1);
    }
  }
}
</style>